<template>
    <div class="edu-page-warp" style="position:relative">
        <div class="edu-page-title">
            <span
                v-for="(item, index) in topNavItems"
                :class="{active: item.active}"
                :key="index"
                class="border-right"
                @click="clickItem(item)"
            >{{ item.label }}</span>
            <el-button
                v-if="dataType === 2 && newType ===2 && false"
                type="text"
                style="float: right;"
                @click="exportDoc"
            >{{ $t('common.btn.export') }} DOC</el-button>
            <el-button
                v-if="dataType === 2 && false"
                type="text"
                style="float: right; margin-right: 8px;"
                @click="exportPdf"
            >{{ $t('common.btn.export') }} PDF</el-button>
        </div>
        <el-card shadow="never" body-style="padding: 35px 0 0 0;">
            <!-- <h2 style="text-align: center;margin-top:10px;">{{ schemeInfo.title }}</h2> -->
            <h2 v-if="focusIndex === 0" style="text-align: center;margin-top:10px;">{{ schemeInfo.name }}</h2>
            <h2 v-if="focusIndex === 1" style="text-align: center;margin-top:10px;">{{ schemeInfo.nameEn }}</h2>
            <div v-if="focusIndex === 0" class="preview-title">
                {{previewTitle}}
            </div>
            <div v-if="focusIndex === 1" class="preview-title">
                {{previewTitleEn}}
            </div>

            <!-- <div v-if="dataType == 2" style="background-color: #f5f6f7; padding: 24px;">
        <h3>{{ $t('common.text.baseInfo') }}</h3>
        <div class="edu-auto-row">
          <div class="edu-auto-col col">
            <div class="edu-auto-label">{{ $t('module.template') }} {{ $t('dic.name') }}：</div>
            <div class="edu-auto-content">{{ schemeInfo.templateName }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">{{ $t('dic.grade') }}：</div>
            <div class="edu-auto-content">{{ schemeInfo.grade }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">{{ $t('dic.faculty') }}：</div>
            <div class="edu-auto-content">{{ schemeInfo.faculty }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">{{ $t('dic.major') }}：</div>
            <div class="edu-auto-content">{{ schemeInfo.major }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">{{ $t('dic.trainingLevel') }}：</div>
            <div class="edu-auto-content">{{ schemeInfo.trainingLevel }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">{{ $t('dic.trainingCategory') }}：</div>
            <div class="edu-auto-content">{{ schemeInfo.trainingCategory }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">{{ $t('dic.formLearning') }}：</div>
            <div class="edu-auto-content">{{ schemeInfo.formLearning }}</div>
          </div>
        </div>
      </div>
      <div v-if="dataType == 1" style="background-color: #f5f6f7; padding: 24px;">
        <h3>基本信息</h3>
        <div class="edu-auto-row">
          <div class="edu-auto-col col">
            <div class="edu-auto-label">模板名称：</div>
            <div class="edu-auto-content">{{ schemeInfo.name }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">年级：</div>
            <div class="edu-auto-content">{{ schemeInfo.year }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">培养层次：</div>
            <div class="edu-auto-content">{{ schemeInfo.trainingLevel }}</div>
          </div>
          <div class="edu-auto-col col">
            <div class="edu-auto-label">学习形式：</div>
            <div class="edu-auto-content">{{ schemeInfo.formLearning }}</div>
          </div>
        </div>
            </div>-->
            <div v-if="focusIndex === 0">
                <div v-for="(item, index) in schemeChapters" :key="index" style="padding: 24px;">
                    <div v-if="item.contentType == 1">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.name }}</h3>
                        <p style="word-break: keep-all" v-html="item.content"></p>
                        <hr>
                    </div>
                    <div v-if="item.contentType == 2">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.name }}</h3>
                        <div v-if="item.detailTable">
                            <p v-html="item.detailTable.contentBefore"></p>
                            <courseCategoryForm
                                v-if="item.detailTable.table === 1"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :template-id-origin="templateIdOrigin"
                            />
                            <courseForm
                                v-if="item.detailTable.table === 2"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :in-change="schemeInfo.status == (2 || 5)"
                            />
                            <p v-html="item.detailTable.contentAfter"></p>
                        </div>
                        <hr>
                    </div>
                    <div v-if="item.contentType == 3 || item.isOldContent">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.name }}</h3>
                        <div>
                            <p v-if="item.detailTable" v-html="item.detailTable.contentBefore"></p>
                            <courseForm
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :in-change="schemeInfo.status == (2 || 5)"
                            />
                            <p v-if="item.detailTable" v-html="item.detailTable.contentAfter"></p>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
            <div v-if="focusIndex === 1">
                <div v-for="(item, index) in schemeChapters" :key="index" style="padding: 24px;">
                    <div v-if="item.contentType == 1">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <p style="word-break: keep-all" v-html="item.contentEn"></p>
                        <hr>
                    </div>
                    <div v-if="item.contentType == 2">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <div v-if="item.detailTable">
                            <p v-html="item.detailTable.contentBeforeEn"></p>
                            <courseCategoryFormEn
                                v-if="item.detailTable.table==1"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :template-id-origin="templateIdOrigin"
                            />
                            <courseFormEn
                                v-if="item.detailTable.table==2"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :in-change="schemeInfo.status == (2 || 5)"
                            />
                            <p v-html="item.detailTable.contentAfterEn"></p>
                        </div>
                        <hr>
                    </div>
                    <div v-if="item.contentType == 3 || item.isOldContent">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <div>
                            <p v-if="item.detailTable" v-html="item.detailTable.contentBeforeEn"></p>
                            <courseFormEn
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :in-change="schemeInfo.status == (2 || 5)"
                            />
                            <p v-if="item.detailTable" v-html="item.detailTable.contentAfterEn"></p>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import * as API from "common/src/api/culture/cultruescheme";
import courseCategoryFormEn from "common/src/views/culture/culturetemplate/graduate/courseCategoryFormEn";
import courseCategoryForm from "common/src/views/culture/culturetemplate/graduate/courseCategoryForm";
import UTILS from "common/src/utils/utils";
import courseFormEn from "common/src/views/culture/culturetemplate/graduate/courseFormEn";
import courseForm from "common/src/views/culture/culturetemplate/graduate/courseForm";
import { getPower } from 'common/src/api/culture/culturePlan'
export default {
    // name: 'schemePreview',
    components: {
        courseCategoryForm,
        courseForm,
        courseCategoryFormEn,
        courseFormEn
    },
    props: {
        dataType: {
            default: "1", // 1为模板，2为方案
            type: String
        },
        id: {
            default: null, // 当前方案Id
            type: String
        },
        templateId: {
            default: null, // 当前方案模板Id
            type: String
        },
        templateIdOrigin: {
            default: null,
            type: String
        }
    },
    data() {
        return {
            topNavItems: [
                {
                    label: this.$t("culture.scheme.inputChaptersCn"),
                    index: 0,
                    active: true
                },
                {
                    label: this.$t("culture.scheme.inputChaptersEn"),
                    index: 1,
                    active: false
                }
            ],
            lang: "cn",
            focusIndex: 0,
            schemeInfo: {},
            schemeChapters: {},
            dic: {},
            showDic: false,
            cultureId: "",
            previewTitle:"",
            newType:2,
            previewTitleEn:""
        };
    },
    created() {
        if(this.dataType == 2){
            let schemeDetails = JSON.parse(sessionStorage.getItem("schemeDetails"));
            if(schemeDetails&&schemeDetails.nameCN){
                this.previewTitle = schemeDetails.nameCN;
                this.previewTitleEn = schemeDetails.nameEN;
                this.dataType = schemeDetails.dataType;
                if(!this.previewTitleEn){
                    this.previewTitleEn = schemeDetails.nameCN
                }
            }
        }
        this.init();
        this.getRole();
    },
    methods: {
        init() {
            const params = {};
            // this.dataType = this.$route.params.dataType || this.dataType;
            if (parseInt(this.dataType) === 2) {
                params.cultureId = this.id || this.$route.params.id;
            } else {
                params.templateId =
                    this.templateId ||
                    this.$route.params.templateId ||
                    this.id ||
                    this.$route.params.id;
            }
            this.id = this.templateId = params.cultureId || params.templateId;
            API.getSchemeChapters(params).then(res => {
                if (res && res.code === 200) {
                    this.schemeChapters = res.data;
                    _.forEach(this.schemeChapters, function(item, key) {
                        item.name =
                            UTILS.numberToChinese(key + 1) + "、" + item.name;
                        item.nameEn = key + 1 + "." + item.nameEn;
                    });
                }
            });
            if (parseInt(this.dataType) === 2) {
                API.findCultureSchemeInId({
                    id: this.id
                }).then(res => {
                    if (res && res.code === 200) {
                        //let title=res.data.grade+'级'+'  '+res.data.trainingCategoryI18n+'  '+res.data.facultyI18n+'  '+res.data.majorI18n+'('+res.data.major+')';
                        this.schemeInfo = res.data;
                        //this.schemeInfo.title=title;
                    }
                });
            } else {
                this.getTemplateInfo(params.templateId);
            }
        },
        getRole(){
            getPower().then((res) => {
                if(res.data.power == 1 || res.data.power == 2){
                    this.newType = 1
                }
            })
        },
        clickItem(item) {
            this.lang = item.index === 0 ? "cn" : "en";
            this.topNavItems.forEach(nav => {
                nav.active = false;
            });
            item.active = true;
            this.focusIndex = item.index;
        },
        exportPdf() {
            // const params = {
            //     id: this.id,
            //     language: this.lang,
            //     "x-token":
            //         this.$store.state.session.sessionid ||
            //         localStorage.getItem("sessionid") ||
            //         ""
            // };
            // API.schemeExportPdf(params);
            let path =
                "/api/cultureservice/cultureScheme/exportCultureSchemePdf?id=" +
                    this.id +
                    "&x-token=" +
                    (this.$store.state.session.sessionid ||
                localStorage.getItem("sessionid") ||
                "") + "&language=" + this.$store.getters.language;
            window.open(path);
        },
        exportDoc() {
            let path =
                "/api/cultureservice/cultureScheme/exportCultureScheme?id=" +
                    this.id +
                    "&x-token=" +
                    (this.$store.state.session.sessionid ||
                localStorage.getItem("sessionid") ||
                "") + "&language=" + this.$store.getters.language;
            window.open(path);
            // const params = {
            //     id: this.id,
            //     language: this.lang,
            //     "x-token":
            //         this.$store.state.session.sessionid ||
            //         localStorage.getItem("sessionid") ||
            //         ""
            // };
            // API.schemeExport(params);
        },
        // 获取模板信息
        async getTemplateInfo(id) {
            API.getTemplateById(id)
                .then(response => {
                    if (response.code === 200) {
                        this.schemeInfo = response.data;
                    }
                })
                .catch(e => {
                    this.$message({
                        type: "error",
                        message: "查询培养方案模板信息失败"
                    });
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.edu-page-title {
    span {
        cursor: pointer;
        display: inline-block;
        padding-right: 10px;
    }
    span.active {
        color: #2876c2;
    }
}

.border-right {
    margin-right: 10px;
}
.preview-title{
    position: absolute;
    left: 10px;
    top: 45px;
    font-size: 14px;
    width: 100%;
    height: 30px;
    z-index: 99999;
    color:#898989;
}
</style>
